<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap的form表单布局</title>
		<!---引入jquery资源--->
		<script type="text/javascript" src="${basePath }js/bootstrap-3.3.7-dist/js/jquery.min.js"></script>
		<!--引入bootstrap的核心js资源文件--->
		<script type="text/javascript" src="${basePath }js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<!--引入bootstrap的核心css资源文件--->
		<link rel="stylesheet" type="text/css" href="${basePath }js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<script type="text/javascript">
		// 获取ajax引擎的函数（进行浏览器兼容处理）
		function getXMLHttpR(){
			// 返回值对象
			var xhr = null;
			// 使用异常处理机制，经浏览器兼容
			try{
				// 假定当前浏览器为  Firefox, Opera 8.0+, Safari，获取ajax引擎对象
				// 创建ajax引擎对象
				xhr = new XMLHttpRequest();
			}catch(e){
				// 创建ajax引擎对象出现异常，说明浏览器不兼容
				// 尝试ie浏览器的方式获取（ie有两种方式，分别进行尝试）
				try{
					xhr=new ActiveXObject("Msxml2.XMLHTTP");
			    }catch (e){
			    	xhr=new ActiveXObject("Microsoft.XMLHTTP");
			    }
			}
			// 返回获取的ajax引擎对象
			return xhr;
		}
		
		// 定义个全局的ajax引擎
		var XMLHttpR = getXMLHttpR();
		
		//进行ajax异步请求处理
		function doAjaxGet(){
			// 进行ajax请求处理
			if(XMLHttpR != null){
				// ajax get方式的处理
				// 请求的服务器url（等价于form表单的action属性值）
				var url="../../AjaxDemoServlet";
				// get方法通过附加在url末尾的方式进行数据传参
				// 附加用户名
				url=url+"?un="+document.getElementById("adminName").value;
				// 附加密码
				url=url+"&upsw="+document.getElementById("adminPsw").value;
				// 如果是get请求，ajax处理get请求时，之后当url内容一样时，只进行一次请求处理
				// 为了当url内容相同时可以进行多次get请求，一般会在url默认追加一个参数值为随机数或时间毫秒数
				url=url+"&s="+Math.random();
				// 打开ajax引擎的请求连接
				// 第一个参数是request请求的方式；第二个参数是ajax引擎请求的服务器的url（action属性值）；
				// 第三个参数是是否进行异步处理；（默认是false？）
				XMLHttpR.open("GET",url,true);
				// 发送ajax请求（因为已经通过url的方式进行数据传输，所以send方法使用参数null即可，
				// 如果是post方法，通过send方法将数据发出）
				XMLHttpR.send(null);
				// 指定ajax引擎状态改变时的回调函数（该函数在触发是可以进行dom操作进行局部刷新的处理）
				XMLHttpR.onreadystatechange=ajaxCallBack;

			}else{
				alert("该浏览器不支持ajax机制");
			}
		}
		
		// ajax的回调函数
		function ajaxCallBack(){
			// 当ajax引擎状态码为4时，进行dom操作
			if(XMLHttpR && XMLHttpR.readyState==4){
				// 接受服务器影响的数据内容
				var respText = XMLHttpR.responseText;
				// 将服务器接受的内容通过dom操作，进行页面的局部刷新操作
				document.getElementById("msg").innerHTML = respText;
			}
		}
		</script>
	</head>

	<body>
		<form class="form-horizontal" action="${basePath}AdminInfoAddServlet" method="post">
			<div class="form-group">
			</div>
			<div class="form-group">
				<label for="txtName" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="adminName" name="adminName" placeholder="请输入用户名">
				</div>
				<label for="txtPsw" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="adminPsw" name="adminPsw" placeholder="请输入密码">
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-4 col-sm-1">
					<button type="button" class="btn btn-default" onclick="doAjaxGet();">登&nbsp;&nbsp;录</button>
				</div>
				<div class="col-sm-offset-1 col-sm-1">
					<button type="button" class="btn btn-default">取&nbsp;&nbsp;消</button>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-3">
					<p id="msg">登录成功</p>
				</div>
			</div>	
		</form>
	</body>

</html>